<template>
	<view class="page">
		<view class="wrapper">
			<swiper class="swiper" :indicator-dots="true" :duration="1000" @change="swiperChange">
				<swiper-item v-for="(i,k) in levelList" :key="k">
					<view class="swiper-item">
						<view class="card" :class="i.style">
							<view class="row">
								<view class="left">
									<view class="cu-avatar round" :style="'background-image:url(' + userinfo.full_picture + ');'"></view>
									<view class="name">
										{{userinfo.nickname}}
									</view>
								</view>
								<view class="level">
									{{i.text}}
								</view>
							</view>
							
							<view class="row">
								<view></view>
								<view class="uid">
									UID：{{userinfo.invite_code}}
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="grids-box">
			<uni-grid :column="3" :showBorder="false">
				<uni-grid-item v-for="(i, k) in grids" :key="k" class="grid">
					<image :src="level >= i.level ? i.iconon : i.icon" class="icon" @click="goto(i.path)"></image>
					<p class="text" @click="goto(i.path)">{{i.text}}</p>
				</uni-grid-item>
			</uni-grid>
		</view>
		
		<view class="wrapper">
			<view class="box" v-show="level == 0">
				<view class="text-white">
					等级特权：
				</view>
				<view class="text-white">
					1、销售奖：3200元/台
				</view>
				<view class="text-white">
					升级条件：
				</view>
				<view class="text-white">
					1、成功注册成为皆有云会员
				</view>
			</view>
			
			<view class="box" v-show="level == 1">
				<view class="text-white">
					等级特权：
				</view>
				<view class="text-white">
					1、销售奖：3200元/台
				</view>
				<view class="text-white">
					2、新增一台奖400元
				</view>
				<view class="text-white">
					升级条件：
				</view>
				<view class="text-white">
					1、成功注册成为皆有云会员
				</view>
				<view class="text-white">
					2、达标要求10台
				</view>
			</view>
			
			<view class="box" v-show="level == 2">
				<view class="text-white">
					等级特权：
				</view>
				<view class="text-white">
					1、销售奖：3200元/台
				</view>
				<view class="text-white">
					2、新增一台奖500元
				</view>
				<view class="text-white">
					3、可申请家庭工作站
				</view>
				<view class="text-white">
					升级条件：
				</view>
				<view class="text-white">
					1、成功注册成为皆有云会员
				</view>
				<view class="text-white">
					2、培养三个销售主管且总业绩50台
				</view>
			</view>
			
			<view class="box" v-show="level == 3">
				<view class="text-white">
					等级特权：
				</view>
				<view class="text-white">
					1、销售奖：3200元/台
				</view>
				<view class="text-white">
					2、新增一台奖600元
				</view>
				<view class="text-white">
					3、可申请家庭工作站
				</view>
				<view class="text-white">
					4、可申请社区服务站
				</view>
				<view class="text-white">
					升级条件：
				</view>
				<view class="text-white">
					1、成功注册成为皆有云会员
				</view>
				<view class="text-white">
					2、培养三个销售主管且总业绩200台
				</view>
			</view>
			
			<view class="box" v-show="level == 4">
				<view class="text-white">
					等级特权：
				</view>
				<view class="text-white">
					1、销售奖：3200元/台
				</view>
				<view class="text-white">
					2、新增一台奖700元
				</view>
				<view class="text-white">
					3、可申请家庭工作站
				</view>
				<view class="text-white">
					4、可申请社区服务站
				</view>
				<view class="text-white">
					4、可申请城市运营中心
				</view>
				<view class="text-white">
					升级条件：
				</view>
				<view class="text-white">
					1、成功注册成为皆有云会员
				</view>
				<view class="text-white">
					2、培养三个销售主管且总业绩1000台
				</view>
			</view>
			
			<view class="box sm">
				<view class="text-white">备注：</view>
				<view class="title">家庭工作站：</view>
				<view>1.业务专员以上或一次购买3台，满足条件任一即可申请。</view>
				<view>2.线上申请，公司培训建档培训后发证，新增每台补贴600元</view>
				<view class="title">社区服务站</view>
				<view>1.销售主管以上或10万代理费，满足条件任一即可申请。</view>
				<view>2.线上申请，公司培训建档培训后发证，新增每台补贴400元。</view>
				<view class="title">城市运营中心</view>
				<view>1.销售经理以上或100万代理费，满足条件任一即可申请。</view>
				<view>2.亲自赴总部考察申请。递交相关资质，签订战略合作。城市每台新增矿机补贴200元。</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import store from '@/store.js'
	export default {
		data() {
			return {
				level: 0,
				levelList: [
					{
						text: '普通用户',
						style: 'level0'
					},
					{
						text: '业务专员',
						style: 'level1'
					},
					{
						text: '销售主管',
						style: 'level2'
					},
					{
						text: '销售经理',
						style: 'level3'
					},
					{
						text: '销售总监',
						style: 'level4'
					},
				],
				grids: [{
						icon: require('../../static/images/lv1.png'),
						iconon: require('../../static/images/lv1on.png'),
						text: '家庭工作站',
						path: '/pages/mine/askfor',
						level: 2
					},
					{
						icon: require('../../static/images/lv2.png'),
						iconon: require('../../static/images/lv2on.png'),
						text: '社区服务站',
						path: '/pages/mine/askfor',
						level: 3
					},
					{
						icon: require('../../static/images/lv3.png'),
						iconon: require('../../static/images/lv3on.png'),
						text: '城市运营中心',
						path: '/pages/mine/askfor',
						level: 4
					},
				],
			}
		},
		computed: {
			userinfo: state => store.state.userinfo
		},
		methods: {
			swiperChange(e) {
				this.level = e.detail.current
			},
			goto(path) {
				uni.navigateTo({
					url: path,
					animationType: 'slide-in-right',
					animationDuration: 300
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: 300rpx;
		.swiper-item {
			height: 100%;
			.card {
				background: url(../../static/images/lvbg0.png);
				background-size: 100% 100%;
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				overflow: hidden;
				background-position: 0% 0%;
				color: #fff;
				background-color: green;
				padding: 40rpx 40rpx 100rpx 40rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left {
						display: flex;
						align-items: center;
						.name {
							margin-left: 20rpx;
						}
					}
					.level {
						font-size: 44rpx;
						font-weight: bold;
						letter-spacing: 4rpx;
					}
				}
			}
			.level0 {
				background: url(../../static/images/lvbg0.png);
				background-size: 100% 100%;
			}
			.level1 {
				background: url(../../static/images/lvbg1.png);
				background-size: 100% 100%;
			}
			.level2 {
				background: url(../../static/images/lvbg2.png);
				background-size: 100% 100%;
			}
			.level3 {
				background: url(../../static/images/lvbg3.png);
				background-size: 100% 100%;
			}
			.level4 {
				background: url(../../static/images/lvbg4.png);
				background-size: 100% 100%;
			}
		}
	}
	.box {
		padding: 60rpx 0;
		font-size: 32rpx;
		line-height: 1.8;
		&.sm {
			font-size: 24rpx;
			.title {
				color: #F3F3F2;
			}
		}
	}
	
	.grids-box {
		background: #141439;
		margin-top: -40rpx;
		height: 180rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		color: #6B6B7D;
		font-size: 20rpx;
		position: relative;
		z-index: 999;
		.grid {
			height: 140rpx !important;
		}
		.grid .icon {
			width: 50rpx;
			height: 50rpx;
			margin: 20rpx auto 20rpx;
		}
		.grid .text {
			text-align: center;
		}
	}
</style>
